
<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Meta Tags -->
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
    <!-- Author -->
    <meta name="author" content="Themes Industry">
    <!-- description -->
    <meta name="description" content="food-shop is a highly creative, modern, visually stunning and Bootstrap responsive multipurpose studio and portfolio HTML5 template with 8 ready home page demos.">
    <!-- keywords -->
    <meta name="keywords" content="food-shop, modern, clean, bootstrap responsive, html5, css3, portfolio, blog, studio, templates, multipurpose, one page, corporate, start-up, studio, branding, designer, freelancer, carousel, parallax, photography, studio, masonry, grid, faq">
    <!-- Page Title -->
    <title>Index - food-shop</title>
    <!-- Favicon -->
  
    <!-- Bundle -->
    <link href="static/css/bundle.min.css" rel="stylesheet">
    <!-- Plugin Css -->
    <link href="static/css/line-awesome.min.css" rel="stylesheet">
    <link href="static/css/revolution-settings.min.css" rel="stylesheet">
    <link href="static/css/jquery.fancybox.min.css" rel="stylesheet">
    <link href="static/css/owl.carousel.min.css" rel="stylesheet">
    <link href="static/css/cubeportfolio.min.css" rel="stylesheet">
    <link href="static/css/swiper.min.css" rel="stylesheet">
    <link href="static/css/nouislider.min.css" rel="stylesheet">
    <link href="static/css/range-slider.css" rel="stylesheet">
    <link href="static/css/blog.css" rel="stylesheet">
    <link href="static/css/style.css" rel="stylesheet">
</head>

<body data-spy="scroll" data-target=".navbar" data-offset="90">

<!-- Preloader -->
<div class="preloader">
    <div class="centrize full-width">
        <div class="vertical-center">
            <div class="spinner">
                <div class="double-bounce1"></div>
                <div class="double-bounce2"></div>
            </div>
        </div>
    </div>
</div>
<!-- Preloader End -->

<!--Header Start-->

<header id="header">
    <div class="upper-nav">
        <div class="container">
            <div class="row">
                <div class="col-12 col-lg-6 mt-auto mb-auto">
                    <ul class="d-flex mb-0 top-info">
                        <li class="c-links d-none d-lg-block"><span><i class="lab la-whatsapp"></i></span><a href="#">+(34)609 331754</a></li>
                    </ul>
                </div>
                <div class="col-12 col-lg-6 mt-auto mb-auto d-lg-flex justify-content-center justify-content-lg-end">
                    <ul class="shop-details d-flex">
                        <li>
<!--                            <a href="#" id="open-search-window"><i class="las la-search"></i></a>-->
                            <a href="javascript:void(0)" class="open_search"><i class="las la-search"></i></a>
                        </li>
                        <li><a href="#" id="open-shop-card"><i class="las la-shopping-bag"></i></a></li>
                    </ul>
                </div>
                <div class="col-12 d-flex justify-content-center align-items-center">
                    <a class="navbar-brand" href="index.html"><img src="static/picture/logo.png"></a>
                </div>
            </div>
        </div>
    </div>
    <!--Navigation-->
    <nav class="navbar navbar-top-default navbar-expand-lg navbar-simple nav-line">
        <div class="container">
            <div class="row no-gutters w-100">
                <div class="col-6 col-lg-3 offset-3 offset-lg-0">
                    <a href="index.html" title="Logo" class="logo fixed-nav-items">
                        <!--Logo Default-->
                        <img src="static/picture/logo.png" alt="logo" class="logo-dark">
                    </a>
                </div>
                <!--Nav Links-->
                <div class="col-6 d-none d-lg-flex justify-content-lg-center align-items-lg-center">
                    <div class="collapse navbar-collapse" id="megaone">
                        <ul class="navbar-nav ml-auto mr-auto">
                            <li><a class="nav-link active" href="index.html">Home</a></li>
                            <li><a class="nav-link" href="about-us.html">About Us</a></li>
                            <li class="nav-item dropdown">
                                <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                    Pages <i class="fas fa-angle-down"></i>
                                </a>
                                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                                    <a class="dropdown-item" href="product-listing.html"><i class="las la-angle-double-right"></i> Product Listing</a>
                                    <a class="dropdown-item" href="product-detail.html"><i class="las la-angle-double-right"></i> Product Detail</a>
                                    <div class="dropdown-divider"></div>
                                    <a class="dropdown-item" href="standalone.html"><i class="las la-angle-double-right"></i> Standalone</a>
                                </div>
                            </li>
                            <li><a class="nav-link" href="product-listing.html">Shop</a></li>
                            <li><a class="nav-link" href="standard-blog.html">Blogs</a></li>
                            <li><a class="nav-link" href="">Contact</a></li>
                        </ul>
                    </div>
                </div>
                <!--Side Menu Button-->
                <div class="col-3 d-flex justify-content-end align-items-center">

                    <ul class="shop-details fixed-nav-items">
                        <li>
                            <a href="javascript:void(0)" class="open_search"><i class="las la-search"></i></a>
                        </li>
                        <li><a href="#" id="open-shop-card1"><i class="las la-shopping-bag"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>
    </nav>
    
    <svg id="header-svg" xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="60" viewbox="0 0 100 100" preserveaspectratio="none">
        <path d="M0 100 C40 0 60 0 100 100 Z"></path>
    </svg>
    <a href="javascript:void(0)" class="sidemenu_btn" id="sidemenu_toggle">
        <span></span>
        <span></span>
        <span></span>
    </a>
</header>

<!--Side Nav-->
<div class="side-menu hidden">
    <div class="inner-wrapper">
        <span class="btn-close" id="btn_sideNavClose"><i></i><i></i></span>
        <nav class="side-nav w-100">
            <ul class="navbar-nav">
                <li class="nav-item">
                    <a class="nav-link" href="index.html">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="about-us.html">About Us</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        Pages <i class="fas fa-angle-down"></i>
                    </a>
                    <div class="dropdown-menu" aria-labelledby="navbarDropdown1">
                        <a class="dropdown-item" href="product-listing.html"><i class="las la-angle-double-right"></i> Product Listing</a>
                        <a class="dropdown-item" href="product-detail.html"><i class="las la-angle-double-right"></i> Product Detail</a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item" href="#"><i class="las la-angle-double-right"></i> Standalone</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="product-listing.html">Shop</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="standard-blog.html">Blogs</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="">Contact Us</a>
                </li>
            </ul>
        </nav>

        <div class="side-footer w-100">
            <ul class="social-icons-simple">
                <li><a class="facebook-text-hvr" href="javascript:void(0)"><i class="fab fa-facebook-f"></i> </a> </li>
                <li><a class="instagram-text-hvr" href="javascript:void(0)"><i class="fab fa-instagram"></i> </a> </li>
                <li><a class="twitter-text-hvr" href="javascript:void(0)"><i class="fab fa-twitter"></i> </a> </li>
            </ul>
           
        </div>
    </div>
</div>
<a id="close_side_menu" href="javascript:void(0);"></a>
<!-- End side menu -->

<!--Header End-->


<!--slider sec strat-->
<section id="slider-sec" class="slider-sec parallax" style="background: url('static/image/contact-slider.jpg');">
    <div class="overlay text-center d-flex justify-content-center align-items-center">
        <div class="slide-contain">
            <h4>Contact Us</h4>
            <div class="crumbs">
                <nav aria-label="breadcrumb" class="breadcrumb-items">
                    <ol class="breadcrumb">
                        <li class="breadcrumb-item"><a href="index-film.html">Home</a></li>
                        <li class="breadcrumb-item"><a href="single-blog.html">Contact Us</a></li>
                    </ol>
                </nav>
            </div>
        </div>
    </div>
</section>
<!--slider sec end-->


<!-- Contact Us Start -->
<section class="contact-sec" id="contact-sec">

    <div class="container">
        <div class="row">
            <div class="col-12 col-lg-6 contact-description wow slideInLeft" data-wow-delay=".8s">
                <div class="contact-detail wow fadeInLeft">
                    <div class="ex-detail">
                        <span class="fly-text">CONTACT US</span>
                        <h4 class="large-heading">
                            <span class="heading-1">Get</span>
                            <span class="heading-2">In Touch</span>
                        </h4>
                    </div>
                    <p class="small-text text-center text-md-left">
                        Lorem ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard.
                    </p>
                    <div class="row location-details text-center text-md-left">
                        <div class="col-12 col-md-6 country-1">
                            <h4 class="heading-text text-left">United States</h4>
                            <ul>
                                <li><i class="fas fa-mobile-alt"></i><a href="#">+(34) 609 33 17 54</a></li>
                                <li><i class="fas fa-envelope"></i><a href="#">email@website.com</a></li>
                                <li><i class="fas fa-map-marker"></i><a href="#">201 Oak Street 27 Manchester, USA</a></li>
                            </ul>
                        </div>
                        <div class="col-12 col-md-6 couuntry-1">
                            <h4 class="heading-text text-left">Australia</h4>
                            <ul>
                                <li><i class="fas fa-mobile-alt"></i><a href="#">+(34) 609 33 17 54</a></li>
                                <li><i class="fas fa-envelope"></i><a href="#">email@website.com</a></li>
                                <li><i class="fas fa-map-marker"></i><a href="#">201 Oak Street 27 Manchester, USA</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-6 contact-box text-center text-md-left wow slideInRight" data-wow-delay=".8s">
                <div class="c-box wow fadeInRight">
                    <h4 class="small-heading">Leave Message</h4>
                    <!--                        <p class="small-text">Lorem ipsum is simply dummy text of the printing and typesetting industry. </p>-->
                    <form class="contact-form" id="contact-form-data">
                        <div class="row my-form">
                            <div class="col-md-12 col-sm-12">
                                <div id="result"></div>
                            </div>
                            <div class="col-12 col-md-6">
                                <input type="text" class="form-control" id="candidate_fname" name="firstName" placeholder="First Name" required="required">
                            </div>
                            <div class="col-12 col-md-6">
                                <input type="text" class="form-control" id="candidate_lname" name="lastName" placeholder="Last Name" required="required">
                            </div>
                            <div class="col-12 col-md-6">
                                <input type="email" class="form-control" id="user_email" name="userEmail" placeholder="Email" required="required">
                            </div>
                            <div class="col-12 col-md-6">
                                <input type="text" class="form-control" id="user_subject" name="userSubject" placeholder="Subject" required="required">
                            </div>
                            <div class="col-12">
                                <textarea class="form-control" id="user_message" name="userMessage" placeholder="Message" rows="7" required="required"></textarea>
                            </div>
                            <div class="col-12">
                                <button class="btn web-btn user-contact rounded-pill contact_btn" type="button">SUBMIT
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Contact Us End -->

<!--Slider Start-->
<div class="map-sec" id="map-sec">
    <div class="row no-gutters">
        <div class="col-12">
            <div class="google-map" id="google-map"></div>
        </div>
    </div>
</div>
<!--Slider End-->
<!--Footer Start-->
<footer class="footer-style-1 bg-light">
    <div class="container">
        <div class="row align-items-center">
            <!--Social-->
            <div class="col-lg-12">
                <div class="footer-social text-center">
                    <ul class="list-unstyled">
                        <li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true" class="lab la-facebook-f"></i></a></li>
                        <li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true" class="lab la-twitter"></i></a></li>
                        <li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true" class="lab la-google"></i></a></li>
                        <li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true" class="lab la-linkedin-in"></i></a></li>
                        <li><a class="wow fadeInUp" href="javascript:void(0);"><i aria-hidden="true" class="lab la-instagram"></i></a></li>
                        <li><a class="wow fadeInDown" href="javascript:void(0);"><i aria-hidden="true" class="las la-envelope"></i></a></li>
                    </ul>
                </div>
            </div>
            <!--Text-->
            <div class="col-lg-12 text-center">
                Copyright &copy; 2022.Company name All rights reserved.<a target="_blank" href="https://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
                </p>
            </div>
        </div>
    </div>
</footer>
<!--Footer End-->

<!--Shop card window Start-->
<section class="shop-card-window hidden" id="shop-card-window">
    <a href="#" id="close-card-window" class="close-card-window"><i class="las la-times"></i></a>
    <div class="shop-card-window-content">
        <h4 class="shop-card-heading">My Bag</h4>
        <div class="d-flex justify-content-center align-items-center">
            <div class="mini-bag">
                <div class="bag-item">
                    <div class="item-img">
                        <img src="static/picture/item1.jpg">
                    </div>
                    <div class="item-details">
                        <h4 class="item-name">Product Name</h4>
                        <span class="item-qty">Qty: 2</span>
                        <span class="item-price">Price: $300</span>
                        <a href="#" class="basket"><i class="las la-trash"></i> </a>
                    </div>
                </div>
                <div class="bag-item">
                    <div class="item-img">
                        <img src="static/picture/item2.jpg">
                    </div>
                    <div class="item-details">
                        <h4 class="item-name">Product Name</h4>
                        <span class="item-qty">Qty: 2</span>
                        <span class="item-price">Price: $300</span>
                        <a href="#" class="basket"><i class="las la-trash"></i> </a>
                    </div>
                </div>
                <div class="bag-item">
                    <div class="item-img">
                        <img src="static/picture/item3.jpg">
                    </div>
                    <div class="item-details">
                        <h4 class="item-name">Product Name</h4>
                        <span class="item-qty">Qty: 2</span>
                        <span class="item-price">Price: $300</span>
                        <a href="#" class="basket"><i class="las la-trash"></i> </a>
                    </div>
                </div>
                <div class="bag-item">
                    <div class="item-img">
                        <img src="static/picture/item4.jpg">
                    </div>
                    <div class="item-details">
                        <h4 class="item-name">Product Name</h4>
                        <span class="item-qty">Qty: 2</span>
                        <span class="item-price">Price: $300</span>
                        <a href="#" class="basket"><i class="las la-trash"></i> </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="bag-btn">
            <h4 class="total"><span>Total: </span>100$</h4>
            <a href="#" class="btn web-dark-btn rounded-pill">View Bag </a>
            <a href="#" class="btn web-btn rounded-pill">Checkout </a>
        </div>
    </div>
</section>
<!--Shop card window  End-->

<!--Search modal window start-->
<div class="search_block">
    <div class="search_box animated wow fadeInUp d-flex justify-content-center align-items-center">
        <div class="inner">
            <input type="text" name="search" id="search" class="search_input" autocomplete="off" placeholder="Enter Your Keywords..">
            <button class="search_icon glyphicon glyphicon-search"><i class="fas fa-search"></i> </button>
        </div>
    </div>
    <div class="search-overlay"></div>
</div>
<!--Search modal window end-->
<!-- JavaScript -->
<script src="static/js/popper.js"></script>

<script src="static/js/bundle.min.js"></script>
<!-- Plugin Js -->
<script src="static/js/jquery.appear.js"></script>
<script src="static/js/jquery.fancybox.min.js"></script>
<script src="static/js/owl.carousel.min.js"></script>
<script src="static/js/parallaxie.min.js"></script>
<script src="static/js/wow.min.js"></script>
<script src="static/js/stickyfill.min.js"></script>
<!-- REVOLUTION JS FILES -->
<script src="static/js/jquery.themepunch.tools.min.js"></script>
<script src="static/js/jquery.themepunch.revolution.min.js"></script>
<script src="static/js/jquery.cubeportfolio.min.js"></script>
<!-- SLIDER REVOLUTION EXTENSIONS -->
<script src="static/js/revolution.extension.actions.min.js"></script>
<script src="static/js/revolution.extension.carousel.min.js"></script>
<script src="static/js/revolution.extension.kenburn.min.js"></script>
<script src="static/js/revolution.extension.layeranimation.min.js"></script>
<script src="static/js/revolution.extension.migration.min.js"></script>
<script src="static/js/revolution.extension.migration.min.js"></script>
<script src="static/js/revolution.extension.parallax.min.js"></script>
<script src="static/js/revolution.extension.slideanims.min.js"></script>
<script src="static/js/revolution.extension.video.min.js"></script>
<!-- google map-->
<!-- <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCJRG4KqGVNvAPY4UcVDLcLNXMXk2ktNfY"></script> -->
<script src="static/js/map.js"></script>
<!--Tilt Js-->
<!-- custom script-->
<script src="static/js/bootstrap-input-spinner.js"></script>
<script src="static/js/swiper.min.js"></script>
<script src="static/js/nouislider.min.js"></script>
<!--contact form-->
<script src="static/js/contact_us.js"></script>
<script src="static/js/script.js"></script>

</body>
</html>